<template>
	<view class="hasbord">
		<view class="swiper"></view>
		<view class="plugin">
			<view class="pluginLeft" @click="toOrder">
				<image src="../../static/image/dashbord/pluginLeft_03.jpg" mode=""></image>
				<view><text class="pluginTextOne">门店自取</text></view>
				<view><text class="pluginTextTwo">下单免排队</text></view>
			</view>
			<view class="lineC"></view>
			<view class="pluginRight">
				<image src="../../static/image/dashbord/pluginRight_03.jpg" mode=""></image>
				<view><text class="pluginTextOne">门店自取</text></view>
				<view><text class="pluginTextTwo">无需接触&nbsp;送喜到家</text></view>
			</view>
		</view>
		<view class="bordCard">
			<view class="cardInfo" @click="toDepart">
				<view class="title">
					<image src="../../static/image/dashbord/card1_03.jpg" mode=""></image>
					<text class="titleText">喜茶百货</text>
					<view><text class="titleInfo">新装气泡水畅饮更尽兴</text></view>
				</view>
			</view>

			<view class="cardInfo">
				<view class="title">
					<image src="../../static/image/dashbord/card2_03.jpg" mode=""></image>
					<text class="titleText">阿喜团餐</text>
					<view><text class="titleInfo">最高享9折火热预定中</text></view>
				</view>
			</view>
		</view>
		<view class="footInfo">
			<view class="leftInfo" @click="toIntegr()">
				<text class="titleInt">我的积分&nbsp;{{homeInt.int}}</text>
				<view><text class="textInfo">可兑换喜茶券和丰富灵感周边</text></view>
			</view>
			<view class="lineFoot"></view>
			<view class="rightInfo">
				<image src="../../static/image/dashbord/Code_03.jpg" mode=""></image>
				<view class="textInfo">会员码</view>
			</view>
		</view>
	</view>
</template>

<script>
import {getHomeData} from '@/api/home.js'
export default {
	name: 'dashbord',
	data() {
		return {
			homeInt: []
		};
	},
	created() {
		this.getData() 
	},
	methods: {
		// 获取数据
		async getData() {
			this.homeInt = await getHomeData().then(res => {
				return res.data
			})
		},
		toOrder () {
			uni.switchTab({
				url: '../order/index'
			});
		},
		toDepart () {
			uni.switchTab({
				url: '../departStore/index'
			})
		},
		toIntegr () {
			// console.log(Int, discount, "Int, discount");
			uni.navigateTo({
				url:"./integr/index?int=" + this.homeInt.int + '&discount=' + encodeURIComponent(JSON.stringify(this.homeInt.discount))
			})
		},
	}
};
</script>

<style>
.hasbord {
	padding: 30rpx;
}
.swiper {
	height: 400rpx;
}
.plugin {
	height: 400rpx;
	box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
	display: flex;
	justify-content: space-around;
	position: relative;
}
.pluginLeft,
.pluginRight {
	text-align: center;
	margin: auto 0;
}
.pluginLeft image,
.pluginRight image {
	vertical-align: bottom;
}
.pluginLeft image {
	width: 90rpx;
	height: 110rpx;
	margin-bottom: 20rpx;
}
.lineC {
	width: 1px;
	height: 260rpx;
	background-color: #f2f2f2;
	position: absolute;
	top: 70rpx;
}
.pluginRight image {
	width: 110rpx;
	height: 110rpx;
	margin-bottom: 16rpx;
}
.pluginTextOne {
	font-size: 35rpx;
	font-weight: bold;
}
.pluginTextTwo {
	font-size: 12rpx;
}
.bordCard {
	margin-top: 50rpx;
	margin-bottom: 30rpx;
	display: flex;
	justify-content: space-between;
}
.cardInfo {
	width: 330rpx;
	height: 150rpx;
	border-radius: 18rpx;
	background-color: #eaebec;
	text-align: center;
	margin: auto 0;
	box-sizing: border-box;
}
.title image {
	width: 40rpx;
	height: 40rpx;
	vertical-align: bottom;
	padding-top: 35rpx;
	margin-right: 15rpx;
}
.titleText {
	font-size: 28rpx;
	font-weight: bold;
}
.titleInfo {
	font-size: 12rpx;
	color: #bcbcbc;
}
.footInfo {
	display: flex;
	justify-content: space-between;
	line-height: 55rpx;
}
.textInfo {
	font-size: 12rpx;
	color: #bfbfbf;
}
.lineFoot {
	width: 1px;
	height: 80rpx;
	margin-top: 15rpx;
	margin-left: 220rpx;
	background-color: #f2f2f2;
}
.rightInfo {
	text-align: center;
}
.rightInfo image {
	width: 50rpx;
	height: 50rpx;
	vertical-align: bottom;
}
</style>
